<!--内容区开始-->
<div class="cont">
    <!--页面遮罩层-->
    <div>
        <!--二级标题-->
        <div class="position " id="page_title">
            <img alt="位置图标" src="dist/images/position.png"/>营销管理&gt;套餐管理
            <a ng-click="openDetail()" ng-hide="$needClientCache" title="打开新窗口查看"><i class="large External icon"></i>
            </a>
        </div>
        <!--查看方式-->
        <div class="mybackground">
            <div class="cont_fr_top">
                <div class="menus_top" style="border-bottom: 0px;">
                    <div class="cont_fr_btn">
                        <div class="fr">
                            <button class="cont_f_btn3" ng-click="showAddPackage()"><i class="add icon"></i>添加</button>
                        </div>
                    </div>
                </div>
                <div class="menus">
                    <div class="menus_con">
                        <div class="ui form">
                            <div class="fields">
                                <div class="four wide inline field">
                                    <label class="label_fl">套餐名称</label>
                                    <input type="text" ng-model="search_param.name" placeholder="套餐名称" ng-keyup="$event.keyCode == 13 && search()" style="width: 160px;">
                                </div>
                                <div class="four wide inline field">
                                    <label>归属产品线</label>
                                    <select name="product_line" ng-model="search_param.product_line" style="padding: 0.3em 1em; width: 160px" id="lineSelect">
                                        <option ng-repeat="sel in productLineList" ng-selected="search_param.product_line == sel.product_line_code" value="{{sel.product_line_code}}" ng-click="setPro()">{{sel.name}}</option>
                                    </select>
                                </div>
                                <div class="eight wide inline field">
                                    <label>归属产品</label>
                                    <select name="product" ng-model="search_param.product_id" style="padding: 0.3em 1em; width: 160px;max-width: 180px;">
                                        <option ng-repeat="sel in productList" ng-selected="search_param.product_id == sel.product_id" value="{{sel.product_id}}">{{sel.name}}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="fields">
                                <div class="four wide field" style="margin-left: 66px;">
                                    <button class="search_btn" ng-click="search()">查询</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="menus_table">
            <table class="ui yellow celled striped table">
                <thead>
                    <tr>
                        <th>套餐名称</th>
                        <th>归属产品</th>
                        <th>归属产品线</th>
                        <th>套餐报价(元)</th>
                        <th>服务时长(月)</th>
                        <th>备注</th>
                        <th style="text-align: center; width: 200px;">操作</th>
                    </tr>
                </thead>
                <tbody class="parts_show">
                    <tr ng-repeat="vpackage in productPackageList">
                        <td style="word-wrap:break-word;">{{vpackage.name}}</td>
                        <td>{{vpackage.product_name}}</td>
                        <td>{{vpackage.line_name}}</td>
                        <td style="text-align:right;">{{vpackage.package_multi_prices}}</td>
                        <td>{{vpackage.package_service}}</td>
                        <td style="word-wrap:break-word;" class="ellipsis" ng-attr-title="{{vpackage.package_remark}}">{{vpackage.package_remark}}</td>
                        <td style="text-align: center;">
                            <a title="查看订户" ng-click="viewOrderCustomer(vpackage.package_code)" class="btn">查看订户</a>
                            <a href="javascript:;" title="编辑" ng-click="showEditPackage()" class="edit_color">编辑</a>
                            <a href="javascript:;" title="删除" ng-click="delPackage()" class="delete_color">删除</a>
                        </td>
                    </tr>
                </tbody>
                <tbody ng-show="rcode==2">
                    <tr ng-show="!busy">
                        <td colspan="4" style="text-align:center;margin-top:10px" class="null_data">没有找到数据~~~</td>
                    </tr>
                </tbody>
            </table>
            <div ng-if="productPackagePage.pageAll >1 && rcode==1" class="ui pagination fr menu" jspagination page-object="productPackagePage" page-func="getProductPackageList">
            </div>
        </div>
    </div>
</div>
<!--内容区结束-->

<!-- 添加套餐 -->
<div class="ui add_package modal">
    <i class="close icon"></i>
    <div class="header_h4">添加套餐</div>
    <div class="content">
        <form action="#" class="frm add ui form">
            <div class="two fields">
                <div class="five wide field required">
                    <label class="label_fl" style="margin-right: 1.8em">套餐名称</label>
                    <input type="hidden" name="checkExist" id="checkExist">
                    <input type="hidden" name="checkCode" id="checkCode">
                    <input type="text" name="add_name" maxlength="50" placeholder="请填写套餐名称" style="width: 160px" ng-blur="checkCode()">
                </div>
                <div class="two wide field"></div>
                <div class="six wide field required">
                    <label class="label_fl" style="margin-right: 1.8em">归属产品</label>
                    <div class="ui selection dropdown" style="width: 200px">
                        <input type="hidden" name="product_id" id="product_id">
                        <div class="default text">请选择产品</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="{{sel.product_id}}" ng-repeat="sel in productWithLine" ng-click="checkNameExist(sel.product_id)">{{sel.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="five wide field required">
                    <label class="label_fl">套餐价格(元)</label>
                    <input type="hidden" name="checkPriceAdd" id="checkPriceAdd">
                    <input type="text" name="add_package_price" ng-model="add_package_price" placeholder="请填写套餐价格" style="width: 160px" maxlength="200">
                </div>
                <div class="two wide field"></div>
                <div class="six wide field required">
                    <label class="label_fl">服务时长(月)</label>
                    <input type="text" name="add_package_service" placeholder="请填写服务时长" style="width: 200px" maxlength="6">
                </div>
            </div>
            <div class="thirteen wide field required">
                <label class="label_fl" style="margin-right: 1.8em;">关联服务</label>
                <div class="ui input" style="width:calc(100% - 122px);">
                    <select class="ui multiple selection dropdown" id="addService" multiple="">
                        <option default value="">请选择关联的服务</option>
                        <option value="{{sel.service_id}}" ng-repeat="sel in qyServiceList">{{sel.name}}</option>
                    </select>
                </div>
            </div>
            <div class="field">
                <label>备注说明</label>
                <div class="ui left icon input">
                    <textarea type="text" rows="5" maxlength="300" name="package_remark" style="overflow:hidden"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<!-- 编辑套餐 -->
<div class="ui edit_package modal">
    <i class="close icon"></i>
    <div class="header_h4">编辑套餐</div>
    <div class="content">
        <form action="#" class="frm edit ui form">
            <input type="hidden" id="update_package_code" name="update_package_code">
            <div class="two fields">
                <div class="five wide field required" id="checkDivEdit">
                    <label class="label_fl" style="margin-right: 1.8em">套餐名称</label>
                    <input type="hidden" name="checkExistEdit" id="checkExistEdit">
                    <input type="hidden" name="checkCodeEdit" id="checkCodeEdit">
                    <input type="text" name="edit_name" ng-model="edit_name" maxlength="50" placeholder="请填写套餐名称"  style="width: 160px" ng-blur="checkEdit()">
                </div>
                <div class="two wide field"></div>
                <div class="six wide field required">
                    <label class="label_fl" style="margin-right: 1.6em">归属产品</label>
                    <div class="ui selection dropdown" id="edit_productDiv" style="width: 200px">
                        <input type="hidden" name="product_id" id="edit_product_id">
                        <div class="default text">请选择产品</div>
                        <i class="dropdown icon"></i>
                        <div class="menu">
                            <div class="item" data-value="{{sel.product_id}}" ng-repeat="sel in productWithLine_edit" ng-click="checkNameExistEdit(sel.product_id)">{{sel.name}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="five wide field required">
                    <label class="label_fl">套餐价格(元)</label>
                    <input type="hidden" name="checkPriceEdit" id="checkPriceEdit">
                    <input type="text" name="edit_package_price" ng-model="edit_package_price" placeholder="请填写套餐价格" style="width: 160px" maxlength="200">
                </div>
                <div class="two wide field"></div>
                <div class="six wide field required">
                    <label class="label_fl">服务时长(月)</label>
                    <input type="text" name="edit_package_service" ng-model="edit_package_service" placeholder="请填写服务时长" style="width: 200px" maxlength="6">
                </div>
            </div>
            <div class="thirteen wide field required">
                <label class="label_fl" style="margin-right: 1.8em;">关联服务</label>
                <div class="ui input" style="width:calc(100% - 122px);">
                    <select class="ui multiple selection dropdown" id="selected_service" name="edit_service" multiple="">
                        <option default value="">请选择关联的服务</option>
                        <option value="{{sel.service_id}}" ng-repeat="sel in qyServiceList">{{sel.name}}</option>
                    </select>
                </div>
            </div>
            <div class="field">
                <label>备注说明</label>
                <div class="ui left icon input">
                    <textarea type="text" rows="5" maxlength="300" name="package_remark" ng-model="edit_package_remark" style="overflow:hidden"></textarea>
                </div>
            </div>
        </form>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>

<!--成功-->
<div class="ui modal OK" style="text-align: center;">
    <div class="header center aligned">提示</div>
    <div class="content center aligned">
        <i class="huge green check circle outline icon"></i>
        <p style="padding-top: 15px;">{{msg}}</p>
    </div>
</div>
<!--失败-->
<div class="ui modal Fail" style="text-align: center;">
    <div class="header center aligned">提示</div>
    <div class="content center aligned">
        <i class="huge red remove circle outline icon"></i>
        <p style="padding-top: 15px;">{{msg}}</p>
    </div>
</div>

<!--确认删除-->
<div class="ui del modal">
    <div class="header" style="text-align: center;">删除套餐信息</div>
    <div class="content" style="text-align: center;">
        <i class="huge blue help circle icon"></i>
        <p style="padding-top: 15px;">确认删除该条产品套餐信息吗?</p>
    </div>
    <div class="actions" style="text-align: center;">
        <button class="ui green button positive">确认</button>
        <button class="ui grey button negative">取消</button>
    </div>
</div>
<script type="text/javascript">
$(function() {
    $('.ui.dropdown').dropdown();
    $.fn.form.settings.rules.checkName = function() {
        var isValid = true;
        var checkExist = $('.frm.add input[name="checkExist"]').val();
        if(checkExist == 'exist')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    $.fn.form.settings.rules.checkNameEdit = function() {
        var isValid = true;
        var checkExistEdit = $('.frm.edit input[name="checkExistEdit"]').val();
        if(checkExistEdit == 'exist')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    $.fn.form.settings.rules.checkCode = function() {
        var isValid = true;
        var checkCode = $('.frm.add input[name="checkCode"]').val();
        if(checkCode == 'exist')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    $.fn.form.settings.rules.checkCodeEdit = function() {
        var isValid = true;
        var checkCodeEdit = $('.frm.edit input[name="checkCodeEdit"]').val();
        if(checkCodeEdit == 'exist')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    $.fn.form.settings.rules.checkPriceAdd = function() {
        var isValid = true;
        var checkPriceAdd = $('.frm.add input[name="checkPriceAdd"]').val();
        if(checkPriceAdd == 'no')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    $.fn.form.settings.rules.checkPriceEdit = function() {
        var isValid = true;
        var checkPriceEdit = $('.frm.edit input[name="checkPriceEdit"]').val();
        if(checkPriceEdit == 'no')
            isValid = false;
        else
            isValid = true;
        return isValid;
    };
    /*添加套餐*/
    $('.frm.add').form({
        on: 'blur',
        inline: true,
        fields: {
            add_name: {
                identifier: 'add_name',
                rules: [{
                    type: 'empty',
                    prompt: '套餐名称不能为空'
                },{
                    type: 'checkName',
                    prompt: '同一产品下套餐不能重复添加'
                },{
                    type: 'checkCode',
                    prompt: '套餐名code不能重复添加'
                }]
            },
            product_id: {
                identifier: 'product_id',
                rules: [{
                    type: 'empty',
                    prompt: '归属产品不能为空'
                }]
            },
            add_package_price: {
                identifier: 'add_package_price',
                rules: [{
                    type: 'empty',
                    prompt: '套餐价格不能为空'
                },{
                    type   : 'checkPriceAdd',
                    prompt : '报价必须为数字，且多个报价必须以;分割'
                }]
            },
            add_package_service: {
                identifier: 'add_package_service',
                rules: [{
                    type: 'empty',
                    prompt: '套餐服务时长不能为空'
                },{
                    type   : 'number',
                    prompt : '套餐服务时长必须为数字'
                },{
                    type   : 'integer',
                    prompt : '套餐服务时长必须为整数'
                }]
            },
            addService: {
                identifier: 'addService',
                rules: [{
                    type: 'empty',
                    prompt: '关联服务不能为空'
                }]
            },
        }
    });
    /*编辑套餐*/
    $('.frm.edit').form({
        on: 'blur',
        inline: true,
        fields: {
            edit_name: {
                identifier: 'edit_name',
                rules: [{
                    type: 'empty',
                    prompt: '套餐名称不能为空'
                },{
                    type: 'checkNameEdit',
                    prompt: '同一产品下套餐不能重复添加'
                },{
                    type: 'checkCodeEdit',
                    prompt: '套餐名code不能重复添加'
                }]
            },
            product_id: {
                identifier: 'product_id',
                rules: [{
                    type: 'empty',
                    prompt: '归属产品不能为空'
                }]
            },
            edit_package_price: {
                identifier: 'edit_package_price',
                rules: [{
                    type: 'empty',
                    prompt: '套餐价格不能为空'
                },{
                    type   : 'checkPriceEdit',
                    prompt : '报价必须为数字，且多个报价必须以;分割'
                }]
            },
            edit_package_service: {
                identifier: 'edit_package_service',
                rules: [{
                    type: 'empty',
                    prompt: '套餐服务时长不能为空'
                },{
                    type   : 'number',
                    prompt : '套餐服务时长必须为数字'
                },{
                    type   : 'integer',
                    prompt : '套餐服务时长必须为整数'
                }]
            },
            edit_service: {
                identifier: 'edit_service',
                rules: [{
                    type: 'empty',
                    prompt: '关联服务不能为空'
                }]
            },
        }
    });
});
</script>